import { Button } from "antd";
import React, { useState, useEffect, useRef } from "react";

interface UseEffectExampleProps {
  fatherCount: number;
}
const UseEffectExample: React.FC<UseEffectExampleProps> = props => {
  const [count, setCount] = useState<number>(0);
  const [fatherCount, setFatherCount] = useState<number>(props.fatherCount);

  useEffect(() => {
    if (props.fatherCount !== fatherCount) {
      console.log("模拟getDerivedStateFromProps");
      setFatherCount(props.fatherCount);
    }
  }, [props.fatherCount, fatherCount]);

  const mounted = useRef<boolean>(false);
  useEffect(() => {
    if (mounted.current === false) {
      mounted.current = true;
    } else {
      console.log("模拟ComponentDidUpdate");
    }
  }, [count]);

  return (
    <>
      <h4>fatherCount:{fatherCount}</h4>
      <p>点击了{count}次</p>
      <Button onClick={() => setCount(count + 1)}>点我</Button>
    </>
  );
};
export default React.memo(UseEffectExample);
